<template>
   <div class="box_">

       <div class="info_">
           <ul>
               <li> 标题：   <input v-model="edit_info.title" type="text" > </li>
               <li> 作者ID：   <input v-model="edit_info.uid" type="text" disabled> </li>
               <li> 文章ID ：<input v-model="edit_info.wid" type="text" disabled> </li>
               <li> 发表日期：<input  v-model="edit_info.date" type="text" disabled> </li>
               <li> 类型：   <input v-model="edit_info.type" type="text" > </li>
               <li> 获赞数：  <input v-model="edit_info.likes" type="text" > </li>
               <li> 浏览量：  <input v-model="edit_info.visit" type="text" > </li>
               <li> 加密密码：
                   <p v-if="!edit_info.encrypt">无    </p>
                   <input v-else v-model="edit_info.password" type="text" >
               </li>
               <li> 状态：
                   <label>
                       启用<input class="check_" name="statue" type="radio" @click="state_(1)" :checked="edit_info.status === 1">
                   </label>
                   <label>
                       审核中<input class="check_" name="statue" type="radio" @click="state_(0)" :checked="edit_info.status === 0">
                   </label>
                   <label>
                       禁用<input class="check_" name="statue" type="radio" @click="state_(-1)" :checked="edit_info.status === -1">
                   </label>
               </li>

           </ul>
           <div class="nav" >
               <button class="ret_" @click="return_">返回</button>
               <button class="submit_" @click="update_">保存</button>
           </div>
       </div>
       <div class="body_" contenteditable="true" v-html="edit_info.body" ref="edit"></div>
       <div class="img_">
           <p style="padding: 10px;font-size: 20px">文章图片：</p>
           <h2 v-if="edit_info.img === ''">暂无图片</h2>
           <ul v-else>
               <li v-for="item in edit_info.img.split(',')">
                   <img :src="item" alt=""></li>
           </ul>
       </div>
   </div>
</template>

<script>
import api from "@/api";

export default {
    name: "ArticleInformationEditing",
    data(){
        return{
            edit_info:{
                 body:"",
                 img:"",
                 title:"",
                 visit:"",
                 likes:"",
                 wid:"",
                 uid:"",
                 date:"",
                 type:"",
                 status:"",
                 encrypt:"",
                 password:"",
            },
        }
    },
    mounted() {
       let edit_info = JSON.parse(window.localStorage.getItem("edit_info"));
        this.edit_info.visit = edit_info.visit
        this.edit_info.likes = edit_info.likes
        this.edit_info.uid = edit_info.uid
        this.edit_info.status = edit_info.status
        this.edit_info.img = edit_info.img
        this.edit_info.wid = edit_info.wid
        this.edit_info.title = edit_info.title
        this.edit_info.type = edit_info.type
        this.edit_info.body = edit_info.body
        this.edit_info.date = edit_info.date
        this.edit_info.encrypt = edit_info.encrypt
        this.edit_info.password = edit_info.password
        this.edit_info.username = edit_info.username
    },
    methods:{
        return_(){
            this.$router.go(-1)
        },
        update_(){
            this.edit_info.body = this.$refs.edit.innerHTML;
          api.updateWritingsInfo(this.edit_info).then((res)=>{
              console.log(res.data.data)
              if(res.data.code === 200){
                  this.$store.commit("requestInfo", "修改成功!");
                  this.$router.go(-1)
              }else {
                  this.$store.commit("requestInfo", "修改失败!");
              }
          })
        },
        state_(status){
            this.edit_info.status = status;
        }
    }
}
</script>

<style scoped>
.box_{
    position: relative;
    display: flex;
    padding: 30px;
    width: 100% !important;
    height: 90vh;
}
.info_{
    width: 300px !important;
    height: 100%;
    margin-right: 40px;
}
input{
    outline: none;
    border: 0;
    text-indent: 0.5rem;
    border-bottom: 1px solid #8f8c8c;
    height: 30px;
}

.info_ ul li{
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    margin-bottom: 10px;
}
.body_{
    width: 700px;
    height: 80vh;
    overflow: auto;
    font-size: 16px;
    letter-spacing: 1px;
    background: white;
    padding: 20px;
    outline: none;
    margin-right: auto;
    box-shadow: rgba(0, 0, 0, 0.35) 0 5px 15px;
}
.check_{
    width: 13px;

}
label{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    cursor: pointer;
}
.img_{
    width: 300px;
    box-shadow: rgba(0, 0, 0, 0.35) 0 0 3px;
}
.img_ ul{
    overflow: auto;
    padding: 0 5px ;
    height: 75vh;
    background: #f8f8f8;
}
.img_ li{
    list-style: none;
    margin-top: 10px;
}
.img_ li:nth-child(1){
    margin-top: 0;
}
.img_ ul li img{
    width: 100%;
    object-fit: cover;
}
.img_ h2{
    text-align: center;
}
.nav{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    cursor: pointer;
    margin-top: 50px;

}
.nav:hover,.submit_:hover{
    opacity: .9;
}
.ret_,.submit_{
    padding: 6px 15px;
    background: #3586f1;
    margin-top: 5px;
    border: 0;
    color: white;
    cursor: pointer;
    border-radius: 2px;

}
.submit_{
    background: #4dd240;
    margin-left: 30px;
}
</style>